<template>
  <el-dialog :title="isEdit?'修改权限':'新增权限'" :visible.sync="visible"
             @close="$emit('update:show', false)">
    <el-form label-width="80px" :rules="rules" :model="params" ref="editForm" size="small">
      <el-form-item label="权限名称" prop="name">
        <el-input placeholder="请输入名称，例:系统管理" v-model="params.name" class="input-with-select">
          <el-select v-model="params.type" prop="type" slot="prepend" placeholder="请选择类型">
            <el-option v-for="item in pmTypes" :key="item.type" v-if="item.type!=''" :label="item.name" :value="item.type"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="权限代码" prop="code">
        <el-input placeholder="请输入权限代码，例:sysmanagement" v-model="params.code"></el-input>
      </el-form-item>
      <el-form-item label="资源路径">
        <el-input placeholder="请输入权限URL，例:/sys/login" v-model="params.url"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单">
        <perm v-model="params.pid"></perm>
      </el-form-item>
      <el-form-item label="图标样式" v-if="params.type==='menu'">
        <icon-select v-model="params.btnClass"></icon-select>
      </el-form-item>
      <el-form-item label="菜单排序">
        <el-input-number v-model="params.sort" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="params.state"
          :active-value='1'
          :inactive-value='0'
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Perm from '../../common/PermissionSelect'
  import IconSelect from '../../common/IconsSelect'

  export default {
    name: "AddEditPermDialog",
    components: {
      Perm,
      IconSelect
    },
    props: ['show', 'permData'],
    watch: {
      show() {
        this.visible = this.show
      },
      permData: {
        handler() {
          if(this.permData){
            for(let k in this.params){
              this.params[k] = this.permData[k]?this.permData[k]:null;
            }
            this.isEdit = true;
          }else{
            for(let k in this.params){
              this.params[k] = '';
            }
            this.params.pid = '0';
            this.params.sort = 99;
            this.params.state = 1;
            this.isEdit = false;
          }
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        visible: this.show,
        isEdit: false,
        params: {
          id: '',
          name: '',
          type: '',
          url: '',
          code: '',
          pid: '0',
          btnClass: '',
          sort: 99,
          state: 1
        },
        rules: {
          type: [
            {required: true, message: '未选择权限类型', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '权限名称不能为空', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '权限代码不能为空', trigger: 'blur'}
          ]
        },
        pmTypes: [
          {name:'全部', type:''},
          {name:'菜单', type:'menu'},
          {name:'功能', type:'button'}
        ]
      }
    },
    methods: {
      save: function(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if(!this.isEdit){
              _url = '/bucket-system/system/resources/add';
            }else{
              _url = '/bucket-system/system/resources/update';
            }
            this.api.post(_url, this.params)
              .then((data) => {
                if(data.code===200){
                  this.visible=false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$parent.query();
                }else{
                  this.$message.error(data.data);
                }
              });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-input-group__prepend .el-select{
    width: 100px;
  }
</style>
